<template>
  <div class="bigDataInfo">
    <div class="item">
      <div class="label"><span class="mark">*</span>大屏名称：</div>
      <div class="infoCon">
        <el-input v-model="infoData.dataName" maxlength="32" placeholder="请输入大屏名称"></el-input>
      </div>
    </div>
    <div class="item">
      <div class="label"><span class="mark">*</span>大屏类型：</div>
      <div class="infoCon">
        <el-select v-model="infoData.dataType" placeholder="请选择大屏类型">
          <el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="item">
      <div class="label"><span class="mark">*</span>大屏背景：</div>
      <div class="infoCon">
        <Upload v-if="infoData.bgImg == ''" :params="params" @fileList="getImgList"></Upload>
        <Upload v-else :params="params1" @fileList="getImgList"></Upload>
      </div>
    </div>
    <div class="btnBox">

    </div>
  </div>
</template>

<script>
//图片上传
import Upload from '@/commont/plugins/uploadImg.vue';
export default {
  components: { Upload },
  props: ['dataInfo'],
  computed: {},
  data() {
    return {
      infoData: this.dataInfo,
      optionsType: [
        { value: 1, label: '普通大屏' },
      ],
      params: {
        type: 'btn',
        btnName: '上传图片',
        url: 'https://jsonplaceholder.typicode.com/posts/',
      },
      params1: {
        type: 'btn',
        url: 'https://jsonplaceholder.typicode.com/posts/',
        btnName: '修改图片',
      },
    }
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {
    getImgList(data) {
      this.infoData.bgImg = data.fileByteUrl;
    }
  },
}
</script>

<style lang="less" scoped>
.bigDataInfo {
  width: 100%;
  height: 100%;
  margin-top: 15px;

  // 模板信息
  .item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-left: 8px;
    border-bottom: 1px dashed #dbdbdb;

    &:nth-last-child(1) {
      border: none;
    }

    .label {
      color: #CFCFD2;

      .mark {
        color: red;
        margin-right: 2px;
        font-weight: normal;
      }
    }

    .infoCon {
      width: calc(100% - 80px);
    }
  }
}
</style>